<template>
  <d2-container :filename="filename" class="page">
    <el-row class="page-content">
      <el-col :span="18"><div class="page-left"></div>
        <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
      </el-col>
      <el-col :span="6">
        <div class="page-right">
          <el-row>
            <el-col :span="24"><div class="page-tan-title">老年活动中心</div></el-col>
            <el-col :span="24">
              <div class="page-tan-content" ref="pageTextItem">
                <div class="page-text-item">
                  <el-tag size="small" closable>{{sysName}}</el-tag> {{sysText}}
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="page-send-text">
          <el-input v-model="input" placeholder="请输入内容" class="send-input"></el-input>

          <el-button type="primary" :loading="false" class="send-submit" @click="sendMsgBut">发送</el-button>
        </div>
      </el-col>
    </el-row>
  </d2-container>
</template>

<script>
import { mapActions } from 'vuex'
import util from '@/libs/util.js'
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  data () {
    return {
      filename: __filename,
      websocket: null,
      input: '',
      sysName: '系统',
      sysText: '你好,欢迎来到老年活动中心,从今天起4元/1次，动次打次beng夏卡拉卡'
    }
  },
  mounted () {
    const token = util.cookies.get('token')
    this.launchWs(token)
    if (!token) {
      this.LoadAllMenu()
    }
    this.drawLine()
  },
  beforeDestroy () {
    this.websocket.close()
  },
  methods: {
    ...mapActions('d2admin/menu', [
      'LoadAllMenu'
    ]),
    drawLine () {
      let myChart = echarts.init(document.getElementById('myChart'))
      myChart.setOption({
        title: { text: '在Vue中使用echarts' },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      })
    },
    launchWs (token) {
      if ('WebSocket' in window) {
        console.info('launch WebSocket -> start')
        this.websocket = new WebSocket('ws://localhost:8110/ws/' + token)
        this.websocket.onerror = function () {
          console.info('error ->')
        }
        this.websocket.onopen = function (event) {
          console.info('open ->' + event)
        }
        this.websocket.onmessage = function (event) {
          console.info('msg ->' + event.data)
        }
        this.websocket.onclose = function () {
          console.info('close ->')
        }
      } else {
        console.info('launch WebSocket -> error')
        this.$message.error('不支持WebSocket')
      }
    },
    sendMsg (msg) {
      this.websocket.send(msg)
    },
    sendMsgBut () {
      if (this.input) {
        this.sendMsg(this.input)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  .page-content {
    height: 100%;
    .page-right {
      border: 1px solid #8A8A8A;
      height: 400px;
      .page-tan-title {
        text-align: center;
        line-height: 30px;
        font-size: 20px;
        align-items: center;
        background-color: lightsteelblue;
      }
      .page-tan-content {
        height:370px;
        background-color: #fff;
        .page-text-item {
          padding: 2px;
          font-size: 12px;
          overflow: hidden;
          color: #303133;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: keep-all;
        }
      }
    }
    .page-send-text {
      height: 100px;
      border-top: 2px solid #303030;

    }
  }
}
</style>
